<template>
	<!-- 扫码转账 -->
	<view class="a_wp">
		<view class="pay_member">
			<view class="info">
				<view class="title">
					<text>付款给</text>
					<text>{{info.name}}</text>
				</view>
				<view class="grade_body">
					<view class="grade">
						<text class="label">VIP</text>
						<text>{{info.discount.vipdiscount}}折</text>
					</view>
					<view class="grade grade1">
						<text class="label">会员</text>
						<text>{{info.discount.discount}}折</text>
					</view>
				</view>
				<view class="shop_label">
					<text>折扣说明</text>
					<text v-for="(item,idx) in disInfo.discount" :key="idx">{{item}}</text>
				</view>
			</view>
			<image class="logo" :src="info.logo" mode=""></image>
		</view>

		<view class="pay_moeny">
			<view class="bill">
				<view class="title">账单</view>
				<view class="money">
					<text class="moeny_title">账单金额</text>
					<view class="price">
						<text :style="{'right':styRight}">￥</text>
						<input :class="{'price_input':price.length>0}" type="digit" v-model="price" @input="changeInput"
							placeholder-class="price_digit" placeholder="账单金额">
					</view>
				</view>
			</view>
			<view class="member" v-if="info.isvip!=1">
				<text>会员享<text class="price">{{info.discount.discount}}折</text>优惠</text>
				<text class="price">-{{dis}}</text>
			</view>
			<view class="discount">
				<view class="">
					VIP享<text class="price">{{info.discount.vipdiscount}}折</text>优惠(<text
						class="price">-{{vipdis}}元</text>)
				</view>
				<view class="upgradation" style="color:#8405dc;" v-if="info.isvip!=1"
					@click="$navTo('/pages/user/vip')">
					<text>马上升级</text>
					<text>></text>
				</view>
			</view>
		</view>
		<view class="pay_zhifu">
			<text>实付￥</text>
			<text class="pay_color">{{money}}</text>
		</view>
		<view class="pay_sumbit">
			<button type="primary" @click="payMoney">立即支付</button>
		</view>

		<uni-popup ref="popup" :is-mask-click="false">
			<view class=""
				style="text-align: center;background-color: #fff;border-radius: 20upx;padding: 30upx;line-height: 70upx;">
				<view class="" style="padding-bottom: 30upx;font-size: 32upx;">
					您还未授权，请授权！
				</view>
				<button style="font-size: 28upx;" open-type="getPhoneNumber"
					@getphonenumber="getUserProfile">一键授权</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Base64 from 'base-64';
	export default {
		data() {
			return {
				styRight: '57px',
				price: '',
				money: 0,
				dis: 0,
				mid: 0,
				vipdis: 0,
				content: '',
				sig: '',
				info: {
					discount: {
						discount: "",
						vipdiscount: ""
					},
					isvip: 0,
					logo: '',
					name: '',
					rate: 1
				},
				disInfo: {
					discount: []
				},
			}
		},
		onLoad(option) {
			if (option.q) {
				let scan_url = decodeURIComponent(option.q);
				this.content = this.gup('content', scan_url);
				this.sig = this.gup('sig', scan_url);
			} else {
				this.content = option.content;
				this.sig = option.sig;
			}
			uni.setStorageSync('mid', Base64.decode(this.content));
			this.mid=Base64.decode(this.content);
			if (!uni.getStorageSync('token')) {
				this.$refs.popup.open();
				return;
			}
			this.getinfo();
		},
		methods: {
			getUserProfile(e) {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let obj = e.detail;
						obj.code1 = loginRes.code;
						obj.mid = that.mid;
						that.$axios('login/xcxlogin', "POST", 'member', obj).then(
							res => {
								if (res.data.code == 200) {
									uni.setStorageSync('token', res.data.data);
									that.getinfo();
									that.$refs.popup.close();
								}
							})
					},
					fail() {
						that.$api.msg('登录失败，请重试！')
					}
				})
			},
			getinfo() {
				var that = this;
				uni.showLoading({
					title: '加载中'
				})
				this.$axios('paytrans/display', 'POST', 'order', {
					content: this.content,
					sig: this.sig
				}).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						this.info = res.data.data;
						this.getDisInfo(this.info.uid);
					}
				})
			},
			getDisInfo(uid) {
				this.$axios('supplierGoods/discountDesc', 'POST', 'shop', {
					uid,
				}).then(res => {
					if (res.data.code == 200) {
						this.disInfo = res.data.data;
					}
				})
			},
			changeInput(e) {
				let value = e.detail.value;
				let right = value.length * 17 > 220 ? 220 : value.length * 17;
				right = value.length <= 0 ? 57 : right;
				this.styRight = right + 'px';
				if (this.price === '') {
					this.money = 0;
					this.dis = 0;
					this.vipdis = 0;
				} else {
					setTimeout(() => {
						if (this.price.indexOf('.') != -1) {
							if (value.split('.')[1].length >= 2) {
								this.price = Math.floor(value * 100) / 100
							}
						}
						this.dis = (this.price * (10 - this.info.discount.discount) / 10).toFixed(2);
						this.vipdis = (this.price * (10 - this.info.discount.vipdiscount) / 10).toFixed(2);
						this.money = (this.price * this.info.rate / 10).toFixed(2);
					}, 50)

				}

			},
			gup(name, url) {
				if (!url) url = location.href;
				name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
				var regexS = "[\\?&]" + name + "=([^&#]*)";
				var regex = new RegExp(regexS);
				var results = regex.exec(url);
				return results == null ? null : results[1];
			},
			payMoney() {
				let that = this;
				if (this.price === '') {
					this.$api.msg('请填写账单金额！')
					return;
				}
				let obj = {
					type: 1,
					content: this.content,
					sig: this.sig,
					money: this.money,
					price: this.price
				}
				uni.showLoading({
					title: '支付中'
				})
				this.$axios('paytrans/recharge', 'POST', 'order', obj).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						let data = res.data.data;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: 'MD5',
							paySign: data.sign,
							success: function(res) {
								that.$navRed('/pages/money/paysucceed?paysn=' + data.paysn)
							},
							fail: function(err) {
								that.cancleOrder(data.paysn);
								that.$api.msg('支付失败');
							}
						});
					}
				})
			},
			cancleOrder(paysn) {
				console.log(1111111);
				this.$axios('paytrans/cancleorder', 'POST', 'order', {
					paysn:paysn
				}).then(res => {
					if (res.data.code == 200) {
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '/store/icon.css';

	page {
		background: #f2f2f2;
		color: #000000;
		font-size: 34upx;
	}

	.a_wp {
		padding-bottom: 130upx;
	}

	.pay_member {
		background: #fff;
		display: flex;
		padding: 20upx;

		.info {
			flex: 1;

			.title {
				text {
					display: inline-block;
					transform: scaleY(1.2);
					font-weight: bold;
					margin-right: 20upx;
				}

				text:nth-of-type(1) {
					color: #999;
					font-weight: normal;
				}
			}

			.grade_body {
				padding: 15upx 0;
			}

			.grade_body,
			.grade {
				display: flex;
				align-items: center;

				.grade {
					color: #8405dc;
					font-size: 28upx;
					font-weight: bold;

					.label {
						background: #000;
						border-radius: 10upx;
						color: #f3dd91;
						padding: 6upx 10upx;
					}

					text {
						padding: 0 20upx;
					}
				}

				.grade1 {
					.label {
						background: #f3dd91;
						color: #927419;
					}
				}
			}

			.shop_label {
				font-size: 26upx;
				color: $bg-color;

				text {
					border: 1px $bg-color solid;
					border-radius: 6upx;
					display: inline-block;
					margin-right: 20upx;
					padding: 2upx 6upx;
				}

				text:nth-of-type(1) {
					background: $bg-color;
					color: #fff;
				}
			}
		}

		.logo {
			border-radius: 10upx;
			height: 110upx;
			width: 110upx;
		}
	}

	.a_pay_wp {
		background: #fff;
		padding: 20upx;
	}

	.a_pay_user {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.a_p_userinfo {
		transform: scaleY(1.2);
		font-weight: bold;
	}

	.pay_name_title {
		color: $font-color-light;
		font-weight: normal;
		margin-right: 20rpx;
	}

	.pay_thumber {
		border-radius: 20upx;
		height: 110upx;
		margin-right: 40upx;
		width: 110upx;
	}

	.pay_message {
		color: $base-color;
		font-size: 30upx;
		transform: scaleY(1.2);
	}

	.pay_moeny {
		background-color: #FFFFFF;
		color: #000;
		margin: 10upx;
		padding: 0 20upx;

		.bill {
			border-bottom: 1px hsl(0, 0%, 87%) solid;
			padding-bottom: 20upx;

			.title {
				color: #999;
				padding-top: 20upx;
			}

			.money {
				display: flex;
				align-items: flex-end;

				.price {
					display: flex;
					justify-content: flex-end;
					flex: 1;
					transform: scaleY(1.2);
					padding-left: 20upx;
					position: relative;

					text {
						position: absolute;
						right: 57px;
						bottom: 5upx;
						font-size: 30upx;
						margin-right: 20upx;
						font-weight: bold;
					}

					input {
						font-size: 60upx;
						height: 60upx;
						font-weight: bold;
						text-align: right;
						width: 220px;
					}

					.price_input {
						transform: translateY(-10upx);
					}

					.price_digit {
						font-size: 32upx;
						font-weight: normal;
					}
				}
			}
		}

		.member,
		.discount {
			border-bottom: 1px hsl(0, 0%, 87%) solid;
			padding: 20upx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price {
				color: #ba0000;
				font-weight: bold;
				transform: scaleY(1.2);
			}
		}

		.discount {
			border: none;

			.price {
				font-weight: normal;
				transform: scaleY(1);
			}

			.upgradation {
				color: #999;
				font-size: 28upx;
				margin-left: 15upx;
			}
		}
	}

	.pay_zhifu {
		background: #ffffff;
		font-weight: bold;
		margin: 10upx;
		text-align: right;
		padding: 20upx;

		text {
			display: inline-block;
			transform: scaleY(1.2);
		}

		.pay_color {
			font-size: 46upx;
			color: #ba0000;
		}
	}

	.pay_sumbit {
		text-align: center;

		button {
			background: rgb(6, 135, 35);
			width: 70%;
			line-height: 85upx;
		}
	}

	// .pay_moeny text {
	// 	display: inline-block;
	// 	transform: scaleY(1.1);
	// }

	.pay_body {
		background-color: #FFFFFF;
		margin: 0 20upx;
		padding: 10upx;
	}

	.pay_li {
		font-weight: bold;
		transform: scaleY(1.2);
		padding: 20upx 0;
	}

	.pay_color {
		color: #FF0000;
		margin-left: 10upx;
	}

	.pay_li2,
	.pay_li4 {
		color: $font-color-base;
		font-size: $font-lg;
		font-weight: bolder;
		padding: 10upx 0;
	}

	.pay_input {
		height: 90upx;
		color: #000;
		border-bottom: 1px hsl(0, 0%, 87%) solid;
		font-size: 48upx;
		font-weight: bolder;
		padding-left: 30upx;
		position: relative;
		transform: scaleY(1.2);
	}

	.pay_input::before {
		content: '￥';
		color: #000;
		font-size: 30upx;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-20%);
	}

	.pay_input_p {
		font-weight: normal;
	}

	.pay_li3 {
		color: $font-color-base;
		display: flex;
		align-items: center;
		padding: 10upx 0 0;
		font-size: 26upx;
	}

	.pay_li3 text {
		display: inline-block;
		transform: scaleY(1.2);
	}

	.pay_item {
		margin-right: 20upx;
		line-height: 55upx;
	}

	.pay_li4 {
		padding: 5upx 0;
		font-size: 24upx;
		transform: scaleY(1);
	}

	.pay_li4_text {
		display: inline-block;
		transform: scaleY(1.2);
	}

	.pay_checkbox {
		transform: scale(0.8);
		margin-left: 10upx;
	}

	.pay_li5 {
		color: $font-color-base;
		font-size: $font-sm;
	}



	.a_buttons {
		color: #fff;
		padding: 40upx 20upx 20upx;
	}

	.a_bs {
		border-radius: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26upx;
		width: 100%;
		margin-top: 40upx;
		height: 70upx;
	}

	.a_bs .iconfont {
		font-size: 36upx;
		margin-right: 10upx;
	}

	.a_bs .icon-beike {
		margin: 0;
	}

	.wx {
		background: #04ae0f;
	}

	.zf {
		background: #15a9f1;
	}

	.bk {
		background: #AA5500;
	}
</style>